<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Forms</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/cluetip/jquery.cluetip.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.cluetip.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.hoverIntent.js"></script>
    <script type="text/javascript">
      $(function(){
        $("[data-tws-help]").cluetip({titleAttribute : "data-tws-help", splitTitle: "|", arrows : true, leftOffset : 12, fx : {open : "fadeIn", openSpeed : 150}, cluetipClass: 'tws', cursor: 'pointer', dropShadow : false});
      });
    </script>

    <style type="text/css">

    </style>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "forms";
  ?>

  <body>

    <!-- Container -->
    <div id="container">
      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>
      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Forms</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content" >

          <div class="sectionLeft">

            <h1>Forms</h1>

            <div id="forms" >

              <h2>Inline Form</h2>

              <form action="" method="post" class="inlineForm">
                <div class="formErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul>
                    <li><a href="#">First name</a> is required</li>
                    <li><a href="#">Last name</a> is required</li>
                    <li><a href="#">Date of birth</a> is required</li>
                    <li><a href="#">Favorite color</a> is required</li>
                    <li><a href="#">Message</a> is required</li>
                  </ul>
                </div>

                <div class="row">
                  <label for="firstName"><span class="helpIcon" data-tws-help="First name|This is the first name"></span><span class="requiredLabel">*</span>First name<span class="errorIcon"></span>
                    <input type="text" id="firstName" value=""/>
                  </label>
                  <label for="lastName"><span class="helpIcon" data-tws-help="Last name|This is the last name"></span><span class="requiredLabel">*</span>Last name<span class="errorIcon"></span>
                    <input type="text" id="lastName" value=""/>
                  </label>

                  <label for="gender_male" class="inline">
                    <input type="radio" id="gender_male" name="gender" value="male"/>Male
                  </label>

                  <label for="gender_female" class="inline">
                    <input type="radio" id="gender_female" name="gender" value="female"/>Female
                  </label>

                  <div class="fieldErrors">
                    <span>First name is required</span>
                    <span>Last name is required</span>
                  </div>
                </div>

                <div class="row">
                  <label for="dob"><span class="helpIcon"  data-tws-help="Date of birth|This is the date of birth"></span><span class="requiredLabel">*</span>Date of birth<span class="errorIcon"></span>
                    <input type="text" id="dob" name="dob"/>
                  </label>

                  <label for="age">Age
                    <input type="text" id="age" name="age"/>
                  </label>

                  <label for="ageRange"> Age range
                    <select id="ageRange" name="ageRange">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>

                  <div class="fieldErrors">
                    <span>Date of birth is required</span>
                  </div>

                </div>
                <div class="row">
                  <!--Address-->
                  <label for="street">Street
                    <input type="text" id="street" name="street"/>
                  </label>

                  <label for="city">City
                    <input type="text" id="city" name="city"/>
                  </label>

                  <label for="state">State
                    <select id="state" name="state">
                      <option value="IL">IL</option>
                    </select>
                  </label>

                  <label for="zip">Zip code
                    <input type="text" id="zip" name="zip"/>
                  </label>
                </div>

                <div class="row">
                  <label for="email"><span class="helpIcon" data-tws-help="Email|This should be your preferred email address"></span><span class="requiredLabel">*</span>Email address
                    <input type="text" id="email" name="email"/>
                  </label>

                  <label for="phone">Phone number
                    <input type="text" id="phone" name="phone"/>
                  </label>

                  <label for="url">Url
                    <input type="text" id="url" name="url"/>
                  </label>

                </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset>
                    <legend><span class="helpIcon" data-tws-help="Which of these foods is your favorte?|You may select more than one!"></span>Favorite foods</legend>
                    <label for="food1" class="stacked">
                      <input type="checkbox" id="food1" name="food1" value="Chinese"/>Chinese
                    </label>
                    <label for="food2" class="stacked">
                      <input type="checkbox" id="food2" name="food2" value="Italian"/>Italian
                    </label>
                    <label for="food3" class="stacked">
                      <input type="checkbox" id="food3" name="food3" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food4" class="stacked">
                      <input type="checkbox" id="food4" name="food4" value="Mexican"/>Mexican
                    </label>
                  </fieldset>

                  <!--Favorite Color--->
                  <fieldset>
                    <legend><span class="requiredLabel">*</span>Favorite color<span class="errorIcon"></span></legend>
                    <label for="color1" class="inline">
                      <input type="radio" id="color1" name="color" value="red"/>Red
                    </label>
                    <label for="color2" class="inline">
                      <input type="radio" id="color2" name="color" value="green"/>Green
                    </label>
                    <label for="color3" class="inline">
                      <input type="radio" id="color3" name="color" value="blue"/>Blue
                    </label>
                  </fieldset>

                  <div class="fieldErrors">
                    <span>Favorite color is required</span>
                  </div>

                </div>

                <div class="row">

                  <label for="message"><span class="requiredLabel">*</span>Message<span class="errorIcon"></span>
                    <textarea cols="20" rows="5" id="message" name="message"></textarea>
                  </label>

                  <div class="fieldErrors">
                    <span>Message is required</span>
                  </div>

                </div>
              </form>


              <h2>Block form</h2>

              <form action="" method="post" class="blockForm">
                <div class="formErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul>
                    <li><a href="#">First name</a> is required</li>
                    <li><a href="#">Last name</a> is required</li>
                    <li><a href="#">Date of birth</a> is required</li>
                    <li><a href="#">Favorite color</a> is required</li>
                    <li><a href="#">Message</a> is required</li>
                  </ul>
                </div>

                <div class="row">
                  <label for="firstName2"><span class="helpIcon"></span><span class="requiredLabel">*</span>First name. This is a very log label. It will wrap to another line.<span class="errorIcon"></span>
                    <input type="text" id="firstName2" value=""/>
                  </label>
                  <div class="fieldErrors">
                    <span>First name is required</span>
                  </div>
                </div>
                <div class="row">
                  <label for="lastName2"><span class="helpIcon"></span><span class="requiredLabel">*</span>Last name<span class="errorIcon"></span>
                    <input type="text" id="lastName2" value=""/>
                  </label>
                  <div class="fieldErrors">
                    <span>Last name is required</span>
                  </div>
                </div>
                <div class="row">
                  <label for="gender_male2" class="inline">
                    <input type="radio" id="gender_male2" name="gender2" value="male"/>Male
                  </label>

                  <label for="gender_female2" class="inline">
                    <input type="radio" id="gender_female2" name="gender2" value="female"/>Female
                  </label>

                </div>

                <div class="row">
                  <label for="dob2"><span class="helpIcon"></span><span class="requiredLabel">*</span>Date of birth<span class="errorIcon"></span>
                    <input type="text" id="dob2" name="dob2"/>
                  </label>

                  <div class="fieldErrors">
                    <span>Date of birth is required</span>
                  </div>

                </div>
                <div class="row">
                  <label for="age2"><span class="helpIcon"></span>Age
                    <input type="text" id="age2" name="age2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="ageRange2"><span class="helpIcon"></span> Age range
                    <select id="ageRange2" name="ageRange2">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>

                </div>

                <div class="row">
                  <!--Address-->
                  <label for="street2">Street
                    <input type="text" id="street2" name="street2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="city2">City
                    <input type="text" id="city2" name="city2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="state2">State
                    <select id="state2" name="state2">
                      <option value="IL">IL</option>
                    </select>
                  </label>
                </div>
                <div class="row">
                  <label for="zip2">Zip code
                    <input type="text" id="zip2" name="zip2"/>
                  </label>
                </div>

                <div class="row">
                  <label for="email2"><span class="requiredLabel">*</span>Email address
                    <input type="text" id="email2" name="email2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="phone2"><span class="helpIcon"></span>Phone number
                    <input type="text" id="phone2" name="phone2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="url2">Url
                    <input type="text" id="url2" name="url2"/>
                  </label>

                </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset>
                    <legend>Favorite foods</legend>
                    <label for="food21" class="stacked">
                      <input type="checkbox" id="food21" name="food21" value="Chinese"/>Chinese
                    </label>
                    <label for="food22" class="stacked">
                      <input type="checkbox" id="food22" name="food22" value="Italian"/>Italian
                    </label>
                    <label for="food23" class="stacked">
                      <input type="checkbox" id="food23" name="food23" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food24" class="stacked">
                      <input type="checkbox" id="food24" name="food24" value="Mexican"/>Mexican
                    </label>
                  </fieldset>
                </div>

                <div class="row">
                  <!--Favorite Color--->
                  <fieldset>
                    <legend><span class="helpIcon"></span><span class="requiredLabel">*</span>Favorite color. This is a very long label. It will wrap. <span class="errorIcon"></span></legend>
                    <label for="color21" class="inline">
                      <input type="radio" id="color21" name="color2" value="red"/>Red
                    </label>
                    <label for="color22"  class="inline">
                      <input type="radio" id="color22" name="color2" value="green"/>Green
                    </label>
                    <label for="color23"  class="inline">
                      <input type="radio" id="color23" name="color2" value="blue"/>Blue
                    </label>
                  </fieldset>

                  <div class="fieldErrors">
                    <span>Favorite color is required</span>
                  </div>

                </div>

                <div class="row">

                  <label for="message2"><span class="requiredLabel">*</span>Message<span class="errorIcon"></span>
                    <textarea cols="20" rows="5" id="message2" name="message2"></textarea>
                  </label>

                  <div class="fieldErrors">
                    <span>Message is required</span>
                  </div>

                </div>

                <div class="row">
                  <label for="children">No. children you have
                    <input type="text" id="children" name="children"/>
                  </label>
                </div>

              </form>


            </div>


            <!--   end #section-->
          </div>

          <!-- Right Navigation -->
          <div id="sidebar">
            <?php include('includes/rightNavSamples.php') ?>
          </div>
          <!-- end Right Navigation -->


          <!-- end #content -->
        </div>

      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>

